<template>
  <div class="app-container">
    <el-card class="box-card">
      <h3>{{$t('虚拟卡明细')}}</h3>
      <!-- 查询操作 -->
      <div class="filter-container">
        <el-form :inline="true" :model="formInline" class="demo-form-inline">
          <el-form-item :label='$t("类型")'>
            <el-select v-model="formInline.type" :placeholder='$t("全部")' clearable>
              <el-option :label='$t("充值")' value="1"></el-option>
              <el-option :label='$t("消费")' value="2"></el-option>
              <el-option :label='$t("转出")' value="3"></el-option>
              <el-option :label='$t("转入")' value="4"></el-option>
              <el-option :label='$t("赠送")' value="5"></el-option>
              <el-option :label='$t("领取")' value="6"></el-option>
              <el-option :label='$t("退款")' value="8"></el-option>
            </el-select>
          </el-form-item>
          <el-button class="filter-item" type="primary" icon="el-icon-search" @click="handleFilter"
                     v-permission="['GET /admin/p/card_virtual_statistic_list']">{{$t('查询')}}
          </el-button>
        </el-form>
      </div>
      <!-- 查询结果 -->
      <el-table v-loading="listLoading" :data="userList" :element-loading-text="$t('Searching')" border fit
                highlight-current-row>
        <el-table-column align="center" :label='$t("用户账号")' prop="addUserName">
        </el-table-column>
        <el-table-column align="center" :label='$t("礼物卡编号")' prop="cardNo">
        </el-table-column>
        <el-table-column align="center" :label="$t('类型')" prop="type">
          <template slot-scope="scope">
            <el-tag effect="dark" :type="getTypeInfo(scope.row.type).tagType">
             $ {{ getTypeInfo(scope.row.type).label }}
            </el-tag>
          </template>
        </el-table-column>

        <el-table-column align="center" :label='$t("金额")' prop="amount">
          <template slot-scope="scope">
            <span>${{scope.row.amount}}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" :label='$t("时间")' prop="consumeTime"/>
        <el-table-column align="center" :label='$t("消费来源")' prop="type">
          <template slot-scope="scope">
            <!-- 1.app 2.pos -->
            <el-tag>
              {{scope.row.orderSource==1?'APP':'POS'}}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column align="center" :label='$t("备注")' prop="content"/>
      </el-table>
      <pagination v-show="userTotal>0" :total="userTotal" :page.sync="listQuery.page" :limit.sync="listQuery.limit"
                  @pagination="getUserList"/>
    </el-card>

    <!-- 绑定实物卡对话框
    <el-dialog :visible.sync="bindDialogVisible" title='$t("绑定实物卡")'>
      <el-form ref="feedbackForm" :model="bindForm" status-icon label-position="left" label-width="100px" style="width: 400px; margin-left:50px;">
        <el-form-item :label='$t("实物卡号")' prop="reply">
          <el-input v-model="bindForm.entityCardCode"/>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="bindDialogVisible = false">{{$t('Cancel')}}</el-button>
        <el-button type="primary" @click="doBind">{{$t('Confirm')}}</el-button>
      </div>
    </el-dialog> -->
  </div>
</template>

<script>
  import { statisticTotal, comsuptionDetails } from '@/api/gift'
  import Pagination from '@/components/Pagination' // Secondary package based on el-pagination
  export default {
    name: 'VirtualCardStaticsdetails',
    components: { Pagination },
    data() {
      const typeMap = {
        '1': this.$t('全场通用'),
        '2': this.$t('指定类目')
      }
      return {
        formInline: {
          page: 1,
          limit: 20,
          giftCardUserId: this.$route.query.allData
        },
        typeMap,
        gift: this.$route.query.allData,
        userList: [],
        userTotal: 0,
        listLoading: false,
        listQuery: {
          page: 1,
          limit: 20,
          giftCardId: this.$route.query.id,
          userName: undefined,
          sort: 'add_time',
          order: 'desc'
        },
        bindDialogVisible: false,
        bindForm: {
          id: undefined,
          entityCardCode: undefined
        }
      }
    },
    created() {

      this.formInline.giftCardUserId = this.$route.query.id
      this.getUserList()
    },
    methods: {
      getTypeInfo(type) {
        const typeMap = {
          1: { label: '充值', tagType: 'success' },
          2: { label: '消费', tagType: 'danger' },
          3: { label: '转出', tagType: 'warning' },
          4: { label: '转入', tagType: 'info' },
          5: { label: '赠送', tagType: 'success' },
          6: { label: '领取', tagType: 'warning' },
          8: { label: '退款', tagType: 'danger' }
        };
        return typeMap[type] || { label: '未知', tagType: 'default' };
      },
      getUserList() {
        comsuptionDetails(this.formInline)
          .then(response => {
            this.userList = response.data.data.list
            this.userTotal = response.data.data.total
            this.listLoading = false
          })
          .catch(() => {
            this.userList = []
            this.userTotal = 0
            this.listLoading = false
          })
      },
      handleFilter() {
        //   let dt = new Date(this.formInline.addTime)
        //    if(isNaN(dt)){
        //     this.formInline.addTime = undefined
        //    }else{
        //           let  getDate = dt.getDate()<10?'0'+dt.getDate():dt.getDate();
        //  let dataTime= dt.getFullYear() + '-' +(dt.getMonth() + 1<10?'0'+(dt.getMonth() + 1):dt.getMonth() + 1)+ '-' +getDate
        //  this.formInline.addTime = dataTime
        //  console.log(isNaN(dt))
        //   console.log(this.formInline,dt.getFullYear() + '-' +(dt.getMonth() + 1<10?'0'+(dt.getMonth() + 1):dt.getMonth() + 1)+ '-'+ isNaN(dt.getFullYear()) ,getDate)
        //      }
        if (this.formInline.type != undefined && this.formInline.type == 0) {
          this.formInline.type = undefined
        }
        this.getUserList()
      },
      handleBack() {
        this.$router.push({ path: '/promotion/giftcard' })
      },
      handleBind(row) {
        this.bindDialogVisible = !this.bindDialogVisible
        this.bindForm.id = row.id
        this.bindForm.entityCardCode = undefined
      }

    }
  }
</script>

<style scoped>
  .filter-container {
    margin-top: 20px;
  }

  .table-layout {
    margin-top: 20px;
    border-left: 1px solid #DCDFE6;
    border-top: 1px solid #DCDFE6;
  }

  .table-cell {
    height: 60px;
    line-height: 40px;
    border-right: 1px solid #DCDFE6;
    border-bottom: 1px solid #DCDFE6;
    padding: 10px;
    font-size: 14px;
    color: #606266;
    text-align: center;
    overflow: hidden;
  }

  .table-cell-title {
    border-right: 1px solid #DCDFE6;
    border-bottom: 1px solid #DCDFE6;
    padding: 10px;
    background: #F2F6FC;
    text-align: center;
    font-size: 14px;
    color: #303133;
  }

  .daytime {
    color: #606266;
    font-size: 14px;
    font-weight: 700;
  }
</style>
